<template>
    <div class="riskPosition_page_class">
        <div class="shadow_bg_class"
             style="width: 100%;color: #ffffff;padding: 12px ">

            <el-form ref="filters" :model="filters" label-width="100px">
                <el-row :gutter="20" style="margin-bottom: 0px">
                    <el-col :span="8">
                        <el-form-item label="风险点编号：" style="margin-bottom: 0 !important;">
                            <el-input
                                    v-model="filters.outNumber"
                                    placeholder="风险点编号" clearable>
                            </el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="风险点类型：" style="margin-bottom: 0 !important;">
                            <el-select v-model="filters.riskPositionType" placeholder="请选择" clearable>
                                <el-option
                                        v-for="item in riskPositionTypeOptions"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                    </el-col>
                    <el-col :span="8" style="display: flex;justify-content: space-between">
                        <el-button type="primary"
                                   style="background: rgba(255, 255, 255, 0.2);border-color: rgba(255, 255, 255, 0.18);"
                                   @click="handleSearch">搜索
                        </el-button>
                        <el-button type="primary"
                                   style="background: rgba(255, 255, 255, 0.2);border-color: rgba(255, 255, 255, 0.18);"
                                   @click="tableOperate('add')">新建风险点
                        </el-button>

                    </el-col>
                </el-row>

            </el-form>

        </div>
        <el-table :data="riskPositionList" class="wxtable" style="margin-top: 12px">
            <el-table-column
                    prop="id"
                    label="ID" width="80" align='center'>
            </el-table-column>
            <el-table-column prop="outNumber" label="风险点编号" width="200" align='center'>
            </el-table-column>
            <el-table-column prop="riskPosition" label="风险点位置" width="200" align='center'>
            </el-table-column>
            <el-table-column prop="riskArea" label="风险输出位置" align='center'>
            </el-table-column>
            <el-table-column prop="outTh" label="点位是否单独" align='center'>
                <template slot-scope="scope">
                    <span v-show="scope.row.outTh==1">独立输出</span>
                    <span v-show="scope.row.outTh==0">不独立输出</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align='center'>
                <template slot-scope="scope">
                    <el-button size="mini" type="warning" plain
                               @click="tableOperate('edit', scope.row)">编辑
                    </el-button>
                    <el-button size="mini" type="info" plain
                               @click="tableOperate('del', scope.row)" v-show="!scope.row.admin">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page-floor">
            <div>

                <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="riskPositionPage.page+1"
                        :page-sizes="[10, 30, 50, 100]"
                        :page-size="riskPositionPage.rows"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="riskPositionPage.count">
                </el-pagination>
            </div>
        </div>

        <el-dialog title="新建风险点" :visible.sync="addFormVisible" width="500px"
                   :close-on-click-modal="false"
                   center>
            <el-form :model="addForm" label-width="120px" :rules="addFormRules" ref="addForm">

                <el-form-item label="风险点编号：" prop="outNumber">
                    <el-input v-model="addForm.outNumber"></el-input>
                </el-form-item>
                <el-form-item label="功率变送器：" prop="iptId">
                    <el-select v-model="addForm.iptId" placeholder="请选择" clearable>
                        <el-option
                                v-for="item in iptIdOptions"
                                :key="item.id"
                                :label="item.description"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="温湿度传感器：" prop="thoId">
                    <el-select v-model="addForm.thoId" placeholder="请选择" clearable>
                        <el-option
                                v-for="item in thoIdOptions"
                                :key="item.id"
                                :label="item.description"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="风险点位置：" prop="riskPosition">
                    <el-input v-model="addForm.riskPosition"></el-input>
                </el-form-item>
                <el-form-item label="风险输出位置：" prop="riskArea">
                    <el-input v-model="addForm.riskArea"></el-input>
                </el-form-item>
                <el-form-item label="点位是否单独：" prop="outTh">
                    <el-radio-group v-model="addForm.outTh" size="small">
                        <el-radio label="0" >独立输出</el-radio>
                        <el-radio label="1" >不独立输出</el-radio>
                    </el-radio-group>
                </el-form-item>

            </el-form>
            <div slot="footer">
                <el-button @click.native="addFormVisible=false" >取消
                </el-button>
                <el-button type="primary" @click.native="addFormSubmit"
                           style="margin-left: 48px">提交
                </el-button>
            </div>
        </el-dialog>

        <el-dialog title="修改风险点" :visible.sync="editFormVisible"  width="500px"
                   :close-on-click-modal="false"
                   center>
            <el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm">

                <el-form-item label="风险点编号：" prop="outNumber">
                    <el-input v-model="editForm.outNumber"></el-input>
                </el-form-item>
                <el-form-item label="功率变送器：" prop="iptId">
                    <el-select v-model="editForm.iptId" placeholder="请选择" clearable>
                        <el-option
                                v-for="item in iptIdOptions"
                                :key="item.id"
                                :label="item.description"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="温湿度传感器：" prop="thoId">
                    <el-select v-model="editForm.thoId" placeholder="请选择" clearable>
                        <el-option
                                v-for="item in thoIdOptions"
                                :key="item.id"
                                :label="item.description"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="风险点位置：" prop="riskPosition">
                    <el-input v-model="editForm.riskPosition"></el-input>
                </el-form-item>
                <el-form-item label="风险输出位置：" prop="riskArea">
                    <el-input v-model="editForm.riskArea"></el-input>
                </el-form-item>
                <el-form-item label="点位是否单独：" prop="outTh">
                    <el-radio-group v-model="editForm.outTh" size="small">
                        <el-radio :label="1" border>独立输出</el-radio>
                        <el-radio :label="0" border>不独立输出</el-radio>
                    </el-radio-group>
                </el-form-item>

            </el-form>
            <div slot="footer">
                <el-button @click.native="editFormVisible=false" >取消
                </el-button>
                <el-button type="primary" @click.native="editFormSubmit" style="margin-left: 48px">提交
                </el-button>

            </div>
        </el-dialog>
    </div>

</template>

<script>
    import risk_position_list_page_bus from './risk_position_list_page_bus.js'

    export default risk_position_list_page_bus

</script>
<style scoped>

</style>
